<template>
  <div class="xd-LearningHome-PoliticalNews-NewsHome p_10">
    <el-card class="m_t_b_5px news_panel" shadow="hover">
      <div slot="header">
        <div class="title">最新公告</div>
      </div>
      <ul class="news_list item_flex_ul">
        <li v-for="p in newsList" :key="p.i_id" @click="goNewsDetail(p.i_id)">
          <span class="title">
            <span style="color:red;" v-if="p.i_is_top">【顶】</span>
            · {{ decodeURI(p.v_seach_v_notice_title)}}
          </span>
          <span class="time">{{p.dtm_publish_date}}</span>
        </li>
        <p v-if="!newsList.length" class="no-data">{{NO_DATA}}</p>
      </ul>
      <el-pagination
        @size-change="sizeChange"
        @current-change="pageChange"
        :current-page="form.pageNumber"
        :page-sizes="[10, 20, 30, 40, 50]"
        :page-size="form.pageSize"
        :layout="PAGE_LAYOUT"
        :total="total"
      ></el-pagination>
    </el-card>
  </div>
</template>
<script>
export default {
  name: 'NoticeHome',
  data() {
    return {
      form: {
        pageNumber: 1,
        pageSize: 10
      },
      total: 0,
      newsList: []
    }
  },
  mounted() {
    this.getNews()
  },
  methods: {
    getNews() {
      utils.post('/notice/list', this.form, res => {
        if (res.success) {
          this.total = res.data.total
          this.newsList = res.data.rows
        }
      })
    },
    sizeChange(val) {
      this.form.pageSize = val
      this.getNews()
    },
    pageChange(val) {
      this.form.pageNumber = val
      this.getNews()
    },
    goNewsDetail(id) {
      this.$router.push({ path: '/LearningHome/NoticeCenter/Detail', query: { id: id, activeMenu: '/LearningHome/NoticeCenter' } })
    }
  }
}
</script>
<style lang="less">
.xd-LearningHome-PoliticalNews-NewsHome {
  .news_panel {
    ul.news_list li {
      border-bottom: solid 1px #dcdfe6;
      padding-bottom: 5px;
    }
  }
}
</style>